/*
  https://flutter.cn/docs/development/ui/layout
  要点
    Widgets 是用于构建 UI 的类。

    Widgets 可以用于布局和展示 UI 元素。

    通过组合简单的 widgets 来构建复杂的 widgets。

    Flutter 布局的核心机制是 widgets。在 Flutter 中，几乎所有东西都是 widget —— 甚至布局模型都是 widgets。你在 Flutter 应用程序中看到的图像，图标和文本都是 widgets。
    此外不能直接看到的也是 widgets，例如用来排列、限制和对齐可见 widgets 的行、列和网格。

    你可以通过组合 widgets 来构建更复杂的 widgets 来创建布局。比如，下面第一个截图上有 3 个图标，每个图标下面都有一个标签：


    3. 将可见 widget 添加到布局 widget
所有布局 widgets 都具有以下任一项：

一个 child 属性，如果它们只包含一个子项 —— 例如 Center 和 Container

一个 children 属性，如果它们包含多个子项 —— 例如 Row、Column、ListView 和 Stack

将 Text widget 添加进 Center widget：

const Center(
  child: Text('Hello World'),
),



4. 将布局 widget 添加到页面
一个 Flutter app 本身就是一个 widget，大多数 widgets 都有一个 build() 方法，在 app 的 build() 方法中实例化和返回一个 widget 会让它显示出来。

对于 Material app，你可以使用 Scaffold widget，它提供默认的 banner 背景颜色，还有用于添加抽屉、提示条和底部列表弹窗的 API。你可以将 Center widget 直接添加到主页 body 的属性中。



通用布局 widgets
Flutter 有一个丰富的布局 widget 仓库，里面有很多经常会用到的布局 widget。目的是为了让你更快的上手，而不是被一个完整的列表吓跑。关于其他有用的 widget 的信息，可以参考 Widget 目录，或者使用 API 参考文档 中的搜索框。而且，API 文档中的 widget 页面中经常会给出一些关于相似的 widget 哪个会更适合你的建议。

下面的 widget 会分为两类：widgets 库 中的标准 widgets 和 Material 库 中的 widgets。任何 app 都可以使用 widget 库，但是 Material 库中的组件只能在 Material app 中使用。

标准 widgets
Container：向 widget 增加 padding、margins、borders、background color 或者其他的“装饰”。

GridView：将 widget 展示为一个可滚动的网格。

ListView：将 widget 展示为一个可滚动的列表。

Stack：将 widget 覆盖在另一个的上面。

Material widgets
Card：将相关信息整理到一个有圆角和阴影的盒子中。

ListTile：将最多三行的文本、可选的导语以及后面的图标组织在一行中。




 */

import 'package:flutter/material.dart';

class MyUI extends StatelessWidget {
  const MyUI({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter layout demo',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter layout demo'),
        ),
        body: const Center(
          child: Text('hello word'),
        ),
      ),
    );
  }
}

class UI1 extends StatelessWidget {
  const UI1({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: const BoxDecoration(color: Colors.blue),
      child: const Center(
        child: Text(
          'hello world',
          textDirection: TextDirection.ltr,
          style: TextStyle(fontSize: 32, color: Colors.black87),
        ),
      ),
    );
  }
}

class UI1App extends StatelessWidget {
  const UI1App({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ui1',
      home: Scaffold(
        body: UI1(),
      ),
    );
  }
}
